<template>
  <div class="public-doc-page-container">
    <el-card shadow="hover">
      <h3 class="doc-title">
        <el-icon>
          <ele-Guide/>
        </el-icon>
        {{detail.title}}
      </h3>
      <MdPreview :editorId="'page' + detail.hash" :modelValue="detail.content"></MdPreview>
      <p class="post-footer">post at <b>{{formatDateTimeStyleOne(detail.updatedAt)}}</b> by <el-avatar :size="20" :src="detail.user?.avatar"/><span>{{detail.user?.userNickname}}</span></p>
    </el-card>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, onBeforeMount} from 'vue';
import {useRoute} from "vue-router";
import {getDocPageDetail} from "/@/api/public";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

import {formatDateTimeStyleOne} from '/@/utils/formatTime';

export default defineComponent({
  name: 'apiPublicDocPage',
  components: {MdPreview},
  setup() {
    const route = useRoute();
    const state = reactive({
      detail: {}
    });
    onBeforeMount(() => {
      const _query = route.query
      if (_query?.hash) {
        queryPage(_query.hash as string);
      }
    });
    const queryPage = (_hash: string) => {
      getDocPageDetail({hash: _hash}).then(res => {
        state.detail = res.data
      })
    }
    return {
      ...toRefs(state),
      formatDateTimeStyleOne,
    };
  },
});
</script>
<style scoped lang="scss">
.public-doc-page-container {
  overflow: hidden;
  padding: 0 10vw;
  .el-card{
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    .doc-title {
      position: sticky;
      padding: 10px 0 20px 20px;
      font-size: 20px;
      top: 0;
      z-index: 1000;
      background-color: #ffffff;
      width: 100%;
      border-bottom: 1px solid #dddddd;
      display: flex;
      align-items: center;
      .el-icon{
        margin-right: 20px;
      }
    }
    .post-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #9e9e9e;
      b{
        margin-left: 10px;
        margin-right: 10px;
      }
      span{
        font-weight: bold;
        color: var(--mx-menu-shortcut-text);
        margin-left: 10px;
      }
    }
  }
}
</style>
